<template>
    <div class="home">
        <div class="swiper-section">
            <div class="swipe-wrapper">
              <mt-swipe :show-indicators="false" ref="swiperComponent" :auto="4000">
                  <mt-swipe-item v-for="item in imgArr" :key="item.goodsid" @click.native="jumpToDetails(item)">
                      <my-image class="my-img" :imgUrl="soursePath+item.icon"></my-image>
                  </mt-swipe-item>
              </mt-swipe>
            </div>
        </div>
        <div class="strip-section" @click="jumpToNewDiscount">
            <div class="left">最新优惠<span class="eng">Latest Reduction</span></div>
            <div class="right"><span class="iconfont icon-toright"></span></div>
        </div>
        <div class="tab-section">
            <div class="tab-item" v-for="item in tabConfig" :style="{backgroundColor:item.BG}" :key="item.key">
              <router-link :to="getPath(item.tourl)">
                <div class="tab-item-wapper">
                  <div class="left"><span class="iconfont" :class="item.icon"></span></div>
                  <div class="right">
                    <div class="chinese">{{item.chinese}}</div>
                    <div class="eng">{{item.eng}}</div>
                  </div>
                </div>
              </router-link>
            </div>
        </div>
        <div class="contact-section">
          <div class="contact-section-wapper" @click="contactUs">
            <span class="iconfont icon-kefu"></span>
            <span class="chinese">联系我们<span class="eng">Contact Us</span></span>
          </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { Swipe, SwipeItem } from "mint-ui";
import Vue from "vue";
import "mint-ui/lib/swipe/style.css";
import "mint-ui/lib/swipe-item/style.css";
import myImage from "../lazyloadImg/lazyImage.vue";
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

export default {
  data() {
    return {
      imgArr: null,
      tabConfig: [
        {
          key: "1",
          icon: "icon-gouwu",
          chinese: "项目介绍",
          eng: "Projects",
          BG: "#58df54",
          tourl: "/projectList"
        },
        {
          key: "2",
          icon: "icon-zuixinzixun",
          chinese: "最新资讯",
          eng: "Activity",
          BG: "#c17afc",
          tourl: "/activityHome"
        },
        {
          key: "3",
          icon: "icon-leijiyuyue",
          chinese: "预约中心",
          eng: "Appoint",
          BG: "#42b9f3",
          tourl: "/masterList"
        },
        {
          key: "4",
          icon: "icon-nicheng",
          chinese: "个人中心",
          eng: "Personal",
          BG: "#d5b096",
          tourl: "/me"
        }
      ]
    };
  },
  components: {
    myImage
  },
  activated() {
    this.$refs.swiperComponent.initTimer();
  },
  beforeRouteLeave(to, from, next) {
    this.$refs.swiperComponent.clearTimer();
    next();
  },
  computed: {
    ...mapState(["openid", "path", "soursePath", "storeid"])
  },
  methods: {
    getPath(path) {
      if (path == "/activityHome")
        return { path: path, query: { tabIndex: 0 } };
      else return path;
    },
    contactUs() {
      this.$router.push("/storeInfo");
    },
    jumpToNewDiscount() {
      this.$router.push({ path: "/activityHome", query: { tabIndex: 1 } });
    },
    jumpToDetails(item){

      var linktype = item.linktype;

      console.log('linktype=' + linktype);

      if (linktype == 1){
        this.$router.push({ path: "/details/"+item.goodsid});
      }
      else{
        this.$router.push({ path: "/storeInfo"});
      }
    }
  },
  created() {
    this.$http
      .post(this.path + "store/Store/consoleIndex", {
        storeid: this.storeid
      })
      .then(response => {
        if (response.body.status == "ok") {
          this.imgArr=response.body.result;
        }
      })
      .catch(response => {});
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
.home {
  height: 100%;
  background-color: #f2f2f2;
  color: #fff;

  .my-img {
    background-color: #efefef;
    width: 100%;
    height: 100%;
  }

  .swiper-section {
    width: 100%;

    .swipe-wrapper {
      .mint-swipe {
        width: 3.2rem;
        height: 1.6rem;
      }
    }
  }

  .strip-section {
    color: #fff;
    height: 0.28rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.14rem;
    background-color: #ffb71c;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      font-size: 0.13rem;

      .eng {
        margin-left: 0.04rem;
        font-size: 0.13rem;
        opacity: 0.6;
      }
    }

    .right {
      .icon-toright {
        font-size: 0.12rem;
      }
    }
  }

  .tab-section {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.13rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 0.17rem;

    .tab-item {
      margin-top: 0.15rem;
      height: 0.9rem;
      width: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.04rem;
      box-shadow: 0 4px 7px rgba(100, 100, 100, 0.1);

      .tab-item-wapper {
        display: flex;
        align-items: center;
        color: #fff;

        .left {
          .iconfont {
            font-size: 0.38rem;
          }
        }

        .right {
          margin-left: 0.08rem;

          .chinese {
            font-size: 0.13rem;
            letter-spacing: 0.03rem;
          }

          .eng {
            margin-top: 0.08rem;
            font-size: 0.12rem;
            opacity: 0.6;
          }
        }
      }
    }
  }

  .contact-section {
    // width 100%;
    height: 0.44rem;
    box-sizing: border-box;
    margin: 0 0.14rem;
    display: flex;
    background-color: #ff7789;
    border-radius: 0.04rem;
    justify-content: center;

    .contact-section-wapper {
      display: flex;
      align-items: center;

      .icon-kefu {
        font-size: 0.24rem;
        opacity: 0.8;
      }

      .chinese {
        margin-left: 0.1rem;
        font-size: 0.15rem;
        letter-spacing: 0.01rem;
      }

      .eng {
        margin-left: 0.06rem;
        font-size: 0.12rem;
        opacity: 0.6;
      }
    }
  }
}
</style>
